<template>
    <!-- 搜索组件根容器 -->
    <view class="my-search-container" :style="{'background-color':bgcolor}" @click="clickFn">
        <!-- 搜索框 -->
        <view class="my-search-box" :style="{'border-radius':radius+'px'}">
            <!-- 图标 -->
            <uni-icons type="search" size="17"></uni-icons>
            <!-- 提示文本 -->
            <text class="placeholder uni-ml-4">搜索</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "my-search",
        props: {
            bgcolor: {
                type: String,
                default: '#c00000'
            },
            radius: {
                type: Number,
                default: 18
            }
        },
        data() {
            return {

            };
        },
        methods: {
            clickFn() {
                this.$emit('click')
            }
        }
    }
</script>

<style lang="scss">
    .my-search-container {
        height: 50px;
        display: flex;
        align-items: center;
        // background-color: #c00000;
        padding: 0 10px;

        .my-search-box {
            height: 36px;
            width: 100%;
            background-color: #fff;
            // border-radius: 18px;
            text-align: center;
            line-height: 36px;

            .placeholder {
                font-size: 15px;

            }
        }
    }
</style>
